<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="header-logo">
        <div class="logo" />
      </div>
      <div class="header-nav">
        <div></div>
        <div class="header-nav-user">
          <span>张晓明</span>
          <span @click="logout">退出登录</span>
        </div>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider>
        <a-menu
          theme="dark"
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
          @click="clickMenu"
        >
          <a-menu-item key="/dashoard">
            <pie-chart-outlined />
            <span>后台汇总</span>
          </a-menu-item>
          <a-sub-menu key="/sys">
            <template #title>
              <span>
                <user-outlined />
                系统设置
              </span>
            </template>
            <a-menu-item key="/sys/user">用户管理 </a-menu-item>
            <a-menu-item key="/sys/role">角色管理</a-menu-item>
            <a-menu-item key="/sys/auth">权限管理</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="/film">
            <template #title>
              <span>
                <user-outlined />
                电影管理
              </span>
            </template>
            <a-menu-item key="/film/list">电影用户列表 </a-menu-item>
            <a-menu-item key="/film/add">电影影片添加</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <!-- 面包屑 -->
        <a-breadcrumb style="margin: 16px 0">
          <template v-for="(item, index) in crumbs" :key="index">
            <a-breadcrumb-item>
              <template v-if="item.url != ''">
                <router-link :to="item.url">
                  {{ item.title }}
                </router-link>
              </template>
              <template v-else>
                {{ item.title }}
              </template>
            </a-breadcrumb-item>
          </template>
        </a-breadcrumb>
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: '280px',
          }"
        >
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { UserOutlined } from "@ant-design/icons-vue";
import { ref, createVNode, watch } from "vue";
import { Modal } from "ant-design-vue";
import useUserStore from "@/store/common";
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const crumbs = ref([]);

// 默认选中
const selectedKeys = ref(["/dashoard"]);
// 如果有二级菜单默认有展开项是那个
const openKeys = ref(["/sys"]);

// 选中二级路由调整
const clickMenu = ({ key: url }) => {
  console.log(url);
  router.push(url);
};

// 退出登录
const logout = () => {
  Modal.confirm({
    title: "用户退出确认",
    content: "真的需要退出吗",
    okText: "确认",
    cancelText: "取消",
    onOk: () => {
      // 清空本地中存储的用户登录状态数据
      userStore.setUser({});
      window.location.href = "/login";
    },
    onCancel: () => {},
  });
};
// 监听路由的变化
watch(
  route,
  (to) => {
    crumbs.value = to.meta.crumb;
    selectedKeys.value = [to.path];
    openKeys.value = ["/" + to.path.split("/")[1]];
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.ant-layout {
  min-height: 100%;
}
.header {
  padding: 0;
  display: flex;
  .header-logo {
    text-align: center;
    height: 100%;
    width: 200px;
    margin-right: 30px;
  }
  .header-nav {
    height: 100%;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    > div:last-child {
      span {
        margin-right: 10px;
        &:last-child {
          cursor: pointer;
        }
      }
    }
  }
}

.logo {
  width: 120px;
  height: 31px;
  margin: 16px auto;
  background: rgba(255, 255, 255, 0.3);
}
</style>
